<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

    <!--
      vue中常有的修饰符有:
            prevent：阻止默认事件
            stop:阻止事件冒泡   
            once:事件之执行一次
    -->

    <div id="root">
        <h2>{{name}}实训摸鱼学vue</h2>
        <!-- 阻止默认事件 -->
        <!-- 添加修饰符prevent可以阻止事件的默认行为(该案例中阻止点击链接后跳转，只执行点击触发的方法)-->
        <!-- 修饰符.prevent亦可用在methods中本点击触发的方法 -->
        <a href="https://www.baidu.com" @click.prevent="showinfo">我是百度</a>

        <!-- 阻止事件冒泡 -->
        <div class="buble1" @click="showinfo">
            <button @click.stop="showinfo">点我显示信息</button> 
        </div>

        <div class="buble2">
            <button @click.once="showinfo">只触发一次</button> 
        </div>

        <!-- 既要阻止冒泡又要阻止默认事件-->
        <div class="buble2">
            <a href="https://www.baidu.com">
                <!-- 链式 -->
                <button @click.stop.prevent="showinfo">点我显示信息</button>
            </a>
        </div>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue在启动的时候生成生产提示

        const a =  new Vue({
            el:"#root",
            data:{
                name:"张扬"
            },
            methods:{
                showinfo(e){
                    // e.preventDefault(); //阻止默认事件的第二种写法
                    // e.stopPropagation();  //阻止事件冒泡
                    alert("摸鱼中。。。");
                }
            }
        })
    </script>
</body>
</html>